<template>
  <ContentWrap>
    <CardTitle title="eCustomTable 表格" />
    
    <!-- 基础用法 -->
    <div class="demo-section">
      <h3>基础用法</h3>
      <div class="code-example">
        <pre><code>&lt;eCustomTable 
  :tableHeader="tableHeader" 
  :tableData="tableData"
  :loading="loading"
  canSetting
  index
  selection
  border
  borderBottom
  @selection-change="handleSelectionChange"
  uniqueKey="table-demo"
/&gt;</code></pre>
      </div>
    </div>

    <!-- 表格属性 -->
    <CardTitle title="Table 属性" />
    <div class="mt-20px">
      <table class="properties-table">
        <thead>
          <tr>
            <th>属性</th>
            <th>类型</th>
            <th>默认值</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>tableHeader</td>
            <td>Array</td>
            <td>[]</td>
            <td>表格列配置</td>
          </tr>
          <tr>
            <td>tableData</td>
            <td>Array</td>
            <td>[]</td>
            <td>表格数据</td>
          </tr>
          <tr>
            <td>loading</td>
            <td>Boolean</td>
            <td>false</td>
            <td>是否显示加载状态</td>
          </tr>
          <tr>
            <td>canSetting</td>
            <td>Boolean</td>
            <td>false</td>
            <td>是否显示列设置</td>
          </tr>
          <tr>
            <td>index</td>
            <td>Boolean</td>
            <td>false</td>
            <td>是否显示序号列</td>
          </tr>
          <tr>
            <td>selection</td>
            <td>Boolean</td>
            <td>false</td>
            <td>是否显示多选列</td>
          </tr>
          <tr>
            <td>border</td>
            <td>Boolean</td>
            <td>false</td>
            <td>是否显示边框</td>
          </tr>
          <tr>
            <td>borderBottom</td>
            <td>Boolean</td>
            <td>false</td>
            <td>是否显示底部边框</td>
          </tr>
          <tr>
            <td>uniqueKey</td>
            <td>String</td>
            <td>''</td>
            <td>表格唯一标识</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 表格列配置 -->
    <CardTitle title="TableHeader 列配置" />
    <div class="mt-20px">
      <table class="properties-table">
        <thead>
          <tr>
            <th>属性</th>
            <th>类型</th>
            <th>默认值</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>label</td>
            <td>String</td>
            <td>''</td>
            <td>列标题</td>
          </tr>
          <tr>
            <td>prop</td>
            <td>String</td>
            <td>''</td>
            <td>字段名</td>
          </tr>
          <tr>
            <td>width</td>
            <td>String</td>
            <td>''</td>
            <td>列宽度</td>
          </tr>
          <tr>
            <td>minWidth</td>
            <td>String</td>
            <td>''</td>
            <td>最小列宽度</td>
          </tr>
          <tr>
            <td>fixed</td>
            <td>String</td>
            <td>''</td>
            <td>固定列 'left' | 'right'</td>
          </tr>
          <tr>
            <td>sortable</td>
            <td>Boolean</td>
            <td>false</td>
            <td>是否可排序</td>
          </tr>
          <tr>
            <td>showOverflowTooltip</td>
            <td>Boolean</td>
            <td>false</td>
            <td>是否显示溢出提示</td>
          </tr>
          <tr>
            <td>alignType</td>
            <td>String</td>
            <td>'left'</td>
            <td>对齐方式 'left' | 'center' | 'right'</td>
          </tr>
          <tr>
            <td>filterConfig</td>
            <td>Object</td>
            <td>{}</td>
            <td>筛选配置</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 事件 -->
    <CardTitle title="Table 事件" />
    <div class="mt-20px">
      <table class="properties-table">
        <thead>
          <tr>
            <th>事件名</th>
            <th>参数</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>selection-change</td>
            <td>selection: Array</td>
            <td>多选项发生变化时触发</td>
          </tr>
          <tr>
            <td>sort-change</td>
            <td>{ column, prop, order }</td>
            <td>排序发生变化时触发</td>
          </tr>
          <tr>
            <td>row-click</td>
            <td>row, column, event</td>
            <td>行点击事件</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 实际演示 -->
    <CardTitle title="表格演示" />
    <div class="mt-20px">
      <div class="demo-controls mb-20px">
        <el-button @click="toggleLoading">切换加载状态</el-button>
        <el-button @click="addRow">添加行</el-button>
        <el-button @click="clearData">清空数据</el-button>
        <el-button @click="loadSampleData">加载示例数据</el-button>
      </div>
      
      <eCustomTable 
        :tableHeader="tableHeader" 
        :tableData="tableData"
        :loading="loading"
        canSetting
        index
        selection
        border
        borderBottom
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        @row-click="handleRowClick"
        uniqueKey="table-demo-example"
      />
      
      <div class="mt-20px" v-if="selectedRows.length > 0">
        <el-alert 
          title="选中行信息" 
          type="info" 
          :description="`已选中 ${selectedRows.length} 行数据`"
          show-icon
        />
      </div>
    </div>

    <!-- 高级筛选示例 -->
    <CardTitle title="高级筛选示例" />
    <div class="mt-20px">
      <div class="code-example">
        <pre><code>// 列配置中添加筛选配置
{
  label: '创建人',
  prop: 'creator',
  filterConfig: {
    type: 'input',
    placeholder: '请输入创建人',
  }
},
{
  label: '状态',
  prop: 'status',
  filterConfig: {
    type: 'select',
    options: [
      { label: '待处理', value: 'pending' },
      { label: '已完成', value: 'completed' }
    ],
  }
},
{
  label: '创建时间',
  prop: 'createTime',
  filterConfig: {
    type: 'date',
    DateType: 'dateTime',
  }
}</code></pre>
      </div>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
const selectedRows = ref<any[]>([])

// 示例数据
const sampleData = [
  {
    id: 1,
    type: '投资申请',
    bizCode: 'INV-2024-001',
    bizStatus: '待审批',
    creator: '张三',
    deptNum: '规划部门A',
    status: '未生成',
    projectKey: '',
    requestValue: 100000,
    projectName: '新产品开发项目(New Product Development)',
    reason: '业务扩展',
    description: '开发新一代智能产品，提升市场竞争力',
    fiCtrId: '李财务',
    usr00: 'SVW-2024-001',
    usr01: 'CP-001',
    usr03: 'BOD-2024-A',
    submitDate: '2024-01-15 09:30:00',
    apprDate: '',
    projectNoCreateDate: '',
    syncSapDate: '',
    completedDate: '',
    source: '手动处理',
    content: '等待财务审核'
  },
  {
    id: 2,
    type: '预算调整',
    bizCode: 'BUD-2024-002',
    bizStatus: '已审批',
    creator: '李四',
    deptNum: '转入部门B',
    status: '已生成',
    projectKey: 'PRJ-2024-002',
    requestValue: 250000,
    projectName: '生产线优化项目(Production Line Optimization)',
    reason: '效率提升',
    description: '优化现有生产线，提高生产效率和产品质量',
    fiCtrId: '王财务',
    usr00: 'SVW-2024-002',
    usr01: 'CP-002',
    usr03: 'BOD-2024-B',
    submitDate: '2024-01-10 14:20:00',
    apprDate: '2024-01-12 16:45:00',
    projectNoCreateDate: '2024-01-13 10:15:00',
    syncSapDate: '2024-01-13 11:30:00',
    completedDate: '',
    source: '自动处理',
    content: '项目号已同步至SAP'
  },
  {
    id: 3,
    type: '设备采购',
    bizCode: 'EQP-2024-003',
    bizStatus: '处理中',
    creator: '王五',
    deptNum: '规划部门C',
    status: '预处理中',
    projectKey: '',
    requestValue: 500000,
    projectName: '智能设备采购项目(Smart Equipment Procurement)',
    reason: '设备更新',
    description: '采购先进的智能制造设备，提升自动化水平',
    fiCtrId: '赵财务',
    usr00: 'SVW-2024-003',
    usr01: 'CP-003',
    usr03: 'BOD-2024-C',
    submitDate: '2024-01-18 11:00:00',
    apprDate: '2024-01-20 09:30:00',
    projectNoCreateDate: '',
    syncSapDate: '',
    completedDate: '',
    source: '混合处理',
    content: '等待设备选型确认'
  }
]

const tableData = ref<any[]>([])

const handleSelectionChange = (selection: any) => {
  selectedRows.value = selection
  console.log('选中行变化:', selection)
}

const handleSortChange = ({ column, prop, order }) => {
  console.log('排序变化:', { column, prop, order })
}

const handleRowClick = (row, column, event) => {
  console.log('行点击:', row)
}

const toggleLoading = () => {
  loading.value = !loading.value
}

const addRow = () => {
  const newRow = {
    id: tableData.value.length + 1,
    type: '新建申请',
    bizCode: `NEW-2024-${String(tableData.value.length + 1).padStart(3, '0')}`,
    bizStatus: '草稿',
    creator: '新用户',
    deptNum: '新部门',
    status: '待处理',
    projectKey: '',
    requestValue: Math.floor(Math.random() * 1000000),
    projectName: `新项目${tableData.value.length + 1}(New Project ${tableData.value.length + 1})`,
    reason: '业务需要',
    description: '新项目描述信息',
    fiCtrId: '财务员',
    usr00: `SVW-2024-${String(tableData.value.length + 1).padStart(3, '0')}`,
    usr01: `CP-${String(tableData.value.length + 1).padStart(3, '0')}`,
    usr03: `BOD-2024-${String(tableData.value.length + 1).padStart(3, '0')}`,
    submitDate: new Date().toLocaleString(),
    apprDate: '',
    projectNoCreateDate: '',
    syncSapDate: '',
    completedDate: '',
    source: '手动添加',
    content: '新建项目'
  }
  tableData.value.push(newRow)
}

const clearData = () => {
  tableData.value = []
  selectedRows.value = []
}

const loadSampleData = () => {
  tableData.value = [...sampleData]
}

const tableHeader = [
  {
    label: '单据类型',
    prop: 'type',
    minWidth: '120px',
    filterConfig: {
      type: 'select',
      options: [
        { label: '投资申请', value: '投资申请' },
        { label: '预算调整', value: '预算调整' },
        { label: '设备采购', value: '设备采购' }
      ],
    }
  },
  {
    label: '申请单编号',
    prop: 'bizCode',
    minWidth: '150px'
  },
  {
    label: '单据状态',
    prop: 'bizStatus',
    minWidth: '120px',
    filterConfig: {
      type: 'select',
      options: [
        { label: '待审批', value: '待审批' },
        { label: '已审批', value: '已审批' },
        { label: '处理中', value: '处理中' },
        { label: '草稿', value: '草稿' }
      ],
    }
  },
  {
    label: '创建人',
    prop: 'creator',
    width: '150',
    showOverflowTooltip: true,
    sortable: true,
    filterConfig: {
      type: 'input',
      placeholder: '请输入创建人',
    }
  },
  {
    label: '规划部门/转入部门',
    prop: 'deptNum',
    minWidth: '180px'
  },
  {
    label: '项目号生成状态',
    prop: 'status',
    minWidth: '180px',
    filterConfig: {
      type: 'select',
      options: [
        { label: '未生成', value: '未生成' },
        { label: '已生成', value: '已生成' },
        { label: '预处理中', value: '预处理中' },
        { label: '待处理', value: '待处理' }
      ],
    }
  },
  {
    label: '项目号',
    prop: 'projectKey',
    minWidth: '180px'
  },
  {
    label: '此次申请额',
    prop: 'requestValue',
    width: '120',
    showOverflowTooltip: true,
    sortable: true,
    alignType: 'right',
    filterConfig: {
      type: 'input',
      placeholder: '请输入此次申请额',
    }
  },
  {
    label: '项目名称(中英文)',
    prop: 'projectName',
    minWidth: '180px'
  },
  {
    label: '投资原因',
    prop: 'reason',
    minWidth: '180px',
    showOverflowTooltip: true,
    sortable: true,
    filterConfig: {
      type: 'select',
      placeholder: '请选择投资原因',
      options: [
        { label: '业务扩展', value: '业务扩展' },
        { label: '效率提升', value: '效率提升' },
        { label: '设备更新', value: '设备更新' },
        { label: '业务需要', value: '业务需要' }
      ]
    }
  },
  {
    label: '项目描述及理由',
    prop: 'description',
    minWidth: '180px'
  },
  {
    label: '财务控制员',
    prop: 'fiCtrId',
    width: '150',
    showOverflowTooltip: true,
    sortable: true,
    filterConfig: {
      type: 'input',
      placeholder: '请输入财务控制员',
    }
  },
  {
    label: 'SVW program no.',
    prop: 'usr00',
    width: '150px'
  },
  {
    label: 'CP-page',
    prop: 'usr01',
    width: '120px'
  },
  {
    label: 'BOD Program',
    prop: 'usr03',
    width: '150px'
  },
  {
    label: '单据提交日期',
    prop: 'submitDate',
    width: '180px',
    filterConfig: {
      type: 'date',
      DateType: 'dateTime',
    }
  },
  {
    label: '审批通过日期',
    prop: 'apprDate',
    width: '180px',
    filterConfig: {
      type: 'date',
      DateType: 'dateTime',
    }
  },
  {
    label: '完成预处理时间',
    prop: 'projectNoCreateDate',
    width: '180px',
    filterConfig: {
      type: 'date',
      DateType: 'dateTime',
    }
  },
  {
    label: '生成项目号时间',
    prop: 'syncSapDate',
    width: '180px',
    filterConfig: {
      type: 'date',
      DateType: 'dateTime',
    }
  },
  {
    label: '完结日期',
    prop: 'completedDate',
    width: '180px',
    filterConfig: {
      type: 'date',
      DateType: 'dateTime',
    }
  },
  {
    label: '预处理完成方',
    prop: 'source',
    minWidth: '180px'
  },
  {
    label: '维护提示',
    prop: 'content',
    minWidth: '180px'
  },
  {
    label: '操作',
    prop: 'operation',
    minWidth: '80px',
    fixed: 'right'
  }
]

// 初始化加载示例数据
loadSampleData()
</script>

<style scoped>
.demo-section {
  margin-bottom: 30px;
}

.demo-section h3 {
  margin: 0 0 15px 0;
  color: #409EFF;
  font-size: 16px;
  font-weight: 600;
}

.code-example {
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px;
  margin: 15px 0;
}

.code-example pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.4;
  color: #2c3e50;
}

.code-example code {
  background: none;
  padding: 0;
  color: inherit;
}

.properties-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ebeef5;
  font-size: 14px;
}

.properties-table th,
.properties-table td {
  border: 1px solid #ebeef5;
  padding: 12px 8px;
  text-align: left;
}

.properties-table th {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #409EFF;
}

.properties-table tbody tr:hover {
  background-color: #f5f7fa;
}

.demo-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mt-20px {
  margin-top: 20px;
}

.mb-20px {
  margin-bottom: 20px;
}
</style>